<template>
  <div class="dialog">
    <el-dialog :title="title" :visible="dialogVisible" @close="dialogclose">
      <el-form :model="stuForm" :rules="stuRules" ref="addStuRuleForm">
        <el-form-item label="头像">
          <el-upload
            ref="avatar-uploader"
            class="avatar-uploader"
            action="http://chst.vip/students/uploadStuAvatar"
            :on-success="AvatarSuccess"
            :on-remove="AvatarRemove"
            :limit="limit"
            list-type="picture-card"
            name="headimgurl"
            :file-list="headimgList"
            :multiple="false"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="stuForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目地址" prop="productUrl">
          <el-input v-model="stuForm.productUrl" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="class">
          <el-input v-model="stuForm.class" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="stuForm.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-input v-model="stuForm.city" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学历" prop="degree">
          <el-input v-model="stuForm.degree" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="stuForm.description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="HIDE_DIALOG">取消</el-button>
        <el-button type="primary" @click="confirmClick('addStuRuleForm')"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions } from "vuex";
import * as api from "../../api";
export default {
  computed: {
    ...mapState(["dialogVisible", "title", "nowRow"]),
  },
  data() {
    return {
      form: "",
      formLabelWidth: "",
      imageUrl: "",
      headimgList: [], //回显的头像
      limit: 1,
      stuRules: {
        name: [{ required: true, message: "请输入名字", trigger: "blur" }],
        class: [{ required: true, message: "请输入班级", trigger: "blur" }],
        degree: [{ required: true, message: "请输入学历", trigger: "blur" }],
        city: [{ required: true, message: "请输入城市", trigger: "blur" }],
        productUrl: [
          { required: true, message: "请输入项目地址", trigger: "blur" },
        ],
        age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" },
        ],
      },
      stuForm: {
        name: "",
        productUrl: "",
        headimgurl: "",
        class: "",
        age: "",
        city: "",
        degree: "",
        description: "",
      },
      oldForm: {},
    };
  },
  created() {
    this.oldForm = { ...this.stuForm };
  },
  methods: {
    ...mapMutations([
      "SHOW_DIALOG",
      "HIDE_DIALOG",
      "SET_TITLE",
      "SET_TABLEDATA",
      "SET_NOWROW",
    ]),
    ...mapActions(["GET_TABLEDATA"]),
    AvatarSuccess(r) {
      console.log(r);
      //上传成功
      if (r.state) {
        //把返回来的图片网络地址，添加给stuForm 传给服务器 保存到数据库
        this.stuForm.headimgurl = r.headimgurl;
        if (this.title === "编辑学员信息") {
          setTimeout(() => {
            //把headimgList列表内容设为当前项
            this.headimgList = [{ url: r.headimgurl }];
          }, 500);
        }
      } else {
        this.$message.error("上传失败");
      }
    },
    AvatarRemove() {},
    confirmClick(fromName) {
      this.$refs[fromName].validate((valid) => {
        //表单校验成功
        if (valid) {
          //添加成功之后，关闭dialog对话框
          this.HIDE_DIALOG();
          //判断是否为增加学员信息
          if (this.title === "增加学员信息") {
            //是学员信息，就调用添加学员信息的接口
            api.addStuApi(this.stuForm).then((res) => {
              if (res.data.state) {
                //添加成功后，重新刷新表格
                this.GET_TABLEDATA();
              } else {
                //添加失败后，报错
                this.$message.error("更新失败，没有做任何修改或者数据不存在");
                //再次更新表格
                this.GET_TABLEDATA();
              }
            });
            //不是增加学员信息模块，那就是修改学员信息模块
          } else {
            api.updateStuApi(this.stuForm).then((res) => {
              console.log(res);
              if (res.data.state) {
                //修改成功，更新视图
                this.GET_TABLEDATA();
              } else {
                //更新失败，数据被删除
                this.$message.error("更新失败，数据不存在");
                this.GET_TABLEDATA();
              }
            });
          }
        } else {
          //表单验证不通过时，报错
          this.$message.error("请按要求完整填写表单");
        }
      });
    },
    dialogclose() {
      this.HIDE_DIALOG();
      //清空dailog数据
      this.stuForm = this.oldForm;
      //清空回显头像的数组
      this.headimgList = [];
      this.limit = 1;
    },
  },
  watch: {
    nowRow(newVal) {
      console.log(newVal);

      this.stuForm = this.nowRow;

      this.headimgList = [{ url: this.nowRow.headimgurl }];
      this.limit = 2;
    },
  },
};
</script>
<style scoped lang="less">
.dialog {
  .avatar-uploader {
    text-align: left;
  }
  /deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
